<meta title="文件上传" width="800px" args="parentId"/>
<div style="padding: 10px;">
    <div style="position: relative; height: 24px; display: inline-block; width: 90px; vertical-align: middle;">
        <button class="btn btn-sm btn-info" style="position: absolute;"><i class="fa fa-upload"></i> 选择文件</button>
        <input autocomplete="off" type="file" class="form-control upload-file" name="file" s-change="selectFile(this.node)"
               style="position: absolute; opacity: 0; width: 90px;height: 25px; left: 0;">
    </div>
    <form s="valid" id="uploadForm" class="form-inline" style="display: inline-block">
        <input autocomplete="off" type="text" class="form-control input-sm" s="tooltip" id="tag" s s-data="tag||''" placeholder="输入商品货号或者其他标识符" title="请输入货号或者其他标识符" s-valid-error="require()" />
        <input autocomplete="off" type="button" class="btn btn-success btn-sm" disabled value="开始上传" id="uploadBtn" s-click="return doUpload()"/>
    </form>
    <table class="table table-striped table-hover" style="width: 100%;">
        <thead>
        <tr>
            <th style="width: 25%;">文件名</th>
            <th style="width: 15%;">大小</th>
            <th style="width: 40%;">上传进度</th>
            <th style="width: 10%;">结果</th>
            <th style="width: 10%;" class="text-right">操作</th>
        </tr>
        </thead>
        <tbody id="filesGrid" s="loop" s-data="[]">
        <tr s-loop-role="empty">
            <td colspan="5">
                <div class="s-none-data-info text-center"><i class="fa fa-info-circle text-info"></i> 请先选择文件</div>
            </td>
        </tr>
        <tr s-loop-role="row" s="datac,row">
            <td s s-data-filter="'name'"></td>
            <td s s-data-filter="'size'"></td>
            <td>
                <div class="progress" style="margin-bottom: 0">
                    <div class="progress-bar progress-bar-warning" style="width: 0%;">0%</div>
                </div>
            </td>
            <td class="upload-tip"></td>
            <td class="text-right">
                <a href="javascript:;" class=" btn btn-sm btn-link text-danger remove-btn">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    var filesGrid = S.S("#filesGrid");
    var uploadBtn = S.N("#uploadBtn");
    var selectedFiles = [];
    var uploadForm = S.S("#uploadForm");
    function selectFile(fileNode) {
        selectedFiles = selectedFiles.concat(fileNode[0].files);
        filesGrid[selectedFiles.length ? 'addRows' : "data"](fileNode[0].files);
        uploadBtn.prop("disabled", false);
    }
    if (multi) {
        S.N(".upload-file").prop("multiple", true);
    }
    filesGrid.node.delegate(".remove-btn", "click", function (e) {
        var node = $(e.currentTarget);
        node.parent().parent().remove();
        if (filesGrid.node.children().size() == 0) {
            filesGrid.data([]);
            uploadBtn.prop("disabled", true);
        }
    });

    function doUpload() {
        var deferred = $.Deferred();
        uploadForm.validate().done(function(){
            var progressBars = $(".progress-bar:not('.progress-bar-success')", filesGrid.node);
            var rs = [];
            function uploadFile(idx) {
                if (idx == progressBars.size()) {
                    S.notice("上传成功", "success");
                    S.close(rs);
                    return;
                }
                var bar = $(progressBars.get(idx));
                var row = bar.parent().parent().parent();
                var rowSmart = Smart.of(row);
                var file = rowSmart.data();
                var uploadTip = $(".upload-tip", rowSmart.node);
                var listener = {
                    setTarget: function(node){
                        this.node = node;
                    },
                    onBegin: function(){

                    },
                    onProgress: function(percent, total, loaded){
                        bar.width(percent+"%").html(percent+"%");
                    },
                    onDone: function(){
                        bar.width("100%").html("100%");
                    }
                }
                var formData = new FormData();
                formData.append("file", file);
                S.upload("/vfile?parentId=" + parentId,
                        formData, listener).done(function (a) {
                            uploadFile(idx + 1);
                            uploadTip.addClass("text-success").html("上传成功");
                            rs.push(a);
                            row.addClass("success");
                            bar.addClass("progress-bar-success").removeClass("progress-bar-warning");
                        }).fail(function(){
                            bar.width("0%").html("0%");
                            uploadTip.addClass("text-danger").html("上传失败");
                            deferred.resolve();
                        });
            }
            uploadFile(0);
        }).fail(function(){
            deferred.resolve();
        })
        return deferred;
    }
</script>